<!--没有对话过，聊天提示-->
<template>
  <div>

    
    <!-- 新增能力部分 -->
    <div class="section">
      <div class="section-header flex justify-between margin-bottom align-center padding-top-lg">
        <div class="text-257CDB text-bold text-19 flex align-center">
	        <img height="24" src="../../../assets/image/aiChatApp/title1.png" width="24"/>
          <span class="margin-left-xs">新增能力</span>
        </div>
      </div>
      <el-card class="ability-card">
        <div class="ability-list">
	        <div v-for="(item, index) in newAbilities" v-show="index < 3" :key="index"
	             :class="index ? 'padding-top' : ''" class="flex ability-item align-center cursor-pointer"
	             @click="handleAbilityClick(item)">
		        <div class="left-box">
			        <img class="ability-icon" src="../../../assets/image/aiChatApp/fun_icon.png" width="24"/>
		        </div>
            <div class="right-box">
              <el-tooltip :content="item.name" placement="top" trigger="click">
                <div class="text-3D3D3D text-bold text-ellipsis">{{ item.name }}</div>
              </el-tooltip>
              <div class="padding-top-4 text-9B9B9B text-sm">{{ item.date }}</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 热门能力部分 -->
    <div class="section">
      <div class="section-header flex justify-between margin-bottom align-center padding-top-lg">
        <div class="text-FF8C20 text-bold text-19 flex align-center">
	        <img height="24" src="../../../assets/image/aiChatApp/title2.png" width="24"/>
          <span class="margin-left-xs">热门能力</span>
        </div>
      </div>
      <el-card class="ability-card">
        <div class="ability-list">
	        <div v-for="(item, index) in hotAbilities" v-show="index < 3" :key="index"
	             :class="index ? 'padding-top' : ''" class="flex ability-item align-center cursor-pointer"
	             @click="handleAbilityClick(item)">
		        <div class="left-box">
			        <img class="ability-icon" src="../../../assets/image/aiChatApp/fun_icon.png" width="24"/>
		        </div>
            <div class="right-box">
              <el-tooltip style="margin-right: 10px" :content="item.name" placement="top" trigger="click">
                <div class="text-3D3D3D text-bold text-ellipsis">{{ item.name }}</div>
              </el-tooltip>
            </div>
          </div>
        </div>
      </el-card>
    </div>
	  <!-- 欢迎引导语 -->
	  <div class="welcome-section bg-white padding margin-bottom">
		  <div class="flex align-center">
			  <img width="40" src="../../../assets/image/aichat/aiRobot.png">
			  <div class="margin-left-sm">
				  <h3 class="text-3667B9 text-bold">江苏中台智能推荐系统</h3>
				  <div class="text-sm text-808080">您好！欢迎使用江苏中台智能推荐系统，我是您的AI助手。请简要描述您的业务场景或技术需求，我将为您提供精准的能力信息推荐。</div>
			  </div>
		  </div>
	  </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';

const emit = defineEmits(['askQuestion']);

// 新增能力列表
const newAbilities = ref([
  {
	  name: '金融交易资金反欺诈安全治理',
	  date: '2024/11/21',
	  question: '请介绍一下金融交易资金反欺诈安全治理的功能和应用场景'
  },
	{
		name: '基于AIGC引擎的全媒体内容分发解决方案',
		date: '2024/11/21',
		question: '请介绍一下基于AIGC引擎的全媒体内容分发解决方案的功能和应用场景',
  },
	{
		name: '系统健康度评分能力',
		date: '2025/3/11',
		question: '请介绍一下系统健康度评分能力的功能和使用场景'
	}
]);

// 热门能力列表
const hotAbilities = ref([
	{
		name: '供应链一码防篡能力',
		date: '2025/11/11',
		question: '有没有供应链防篡改的相关能力'
	},
	{
		name: '旅游消费指数分析能力',
		date: '2025/11/11',
		question: '我想分析一下旅游消费指数'
	},
	{
		name: '诈骗APP研判识别能力',
		date: '2025/11/11',
		question: '请介绍一下诈骗APP研判识别能力的功能和使用场景'
	}
]);

const handleAbilityClick = (ability) => {
	// 使用预设的问题，如果没有则构造一个通用问题
	const question = ability.question || `请详细介绍${ability.name}的功能和使用场景`;
	emit('askQuestion', question);
}
</script>

<style scoped>
.welcome-section {
  border-radius: 8px;
  box-shadow: 0px 3px 10px 0px rgba(86, 125, 244, 0.05);
  margin-top: 16px;
}

.ability-card {
  box-shadow: 0px 3px 10px 0px rgba(86, 125, 244, 0.05);
  border-radius: 8px;
  background: url('../../../assets/image/aiChatApp/sell-bg.png') no-repeat 74% 64%;
}

.ability-item {
  .left-box {
    width: 36px;
  }

  .right-box {
    width: calc(100% - 36px);
  }
}

.ability-icon {
	width: 24px;
	height: 24px;
}

.cursor-pointer {
	cursor: pointer;
}

.ability-item:hover {
	background-color: rgba(62, 127, 227, 0.05);
	border-radius: 4px;
}
</style>
